<template>
	<div>
		<div class="goods" v-if="goods">
		<!-- {{currentIndex}} -->
			<div class="menu-wrapper" ref="menuWrapper">
				<ul>
					<!-- current -->
					<li class="menu-item" @click="menuItemEvent(index)" :class="{current: index===currentIndex}" v-for="(item,index) in goods" :key="index">
						<span class="text bottom-border-1px">
							<!-- 有才显示,没有就不生成架构 -->
							<img class="icon" v-lazy="item.icon" v-if="item.icon">
							{{item.name}}
						</span>
					</li>
				</ul>
			</div>
			<div class="foods-wrapper" ref="foodsWrapper" v-if="goods">
				<ul>
					<li class="food-list-hook" v-for="(item,index) in goods" :key="index">
						<h1 class="title">{{item.name}}</h1>
						<ul>
							<li class="food-item bottom-border-1px" @click="foodDetailShow(food)" v-for="(food,index) in item.foods" :key="index">
								<div class="icon">
									<img width="57" height="57" v-lazy="food.icon">
								</div>
								<div class="content">
									<h2 class="name">{{food.name}}</h2>
									<p class="desc">{{food.description}}</p>
									<div class="extra">
										<span class="count">月售 {{food.sellCount}} 份</span>
										<span>好评率 {{food.rating}}%</span>
									</div>
									<div class="price">
										<span class="now">￥{{food.price}}</span>
									</div>
									<div class="cartcontrol-wrapper">
										<CartControl :foodObj="food"/>
									</div>
								</div>
							</li>
						</ul>
					</li>
				</ul>
			</div>
			<ShopCart/>
		</div>
		<FoodDetailImage :foodObj="food" ref="foods"/>
	</div>
</template>

<script>
	import {mapState} from 'vuex'
	import BScroll from '@better-scroll/core'
	import CartControl from '../../../components/cartControl/index.vue'
	import FoodDetailImage from '../../../components/food/foodDetailBigImage/index.vue'
	import ShopCart from '../../../components/shopCart/index.vue'
	export default{
		name:'Goods',
		computed:{
			...mapState(['goods']),
			// 计算出当前分类的下标
			currentIndex(){ // 初始时执行一次,所依赖数据发生变化时也执行
				let index = this.tops.findIndex((top,index)=>{
					// scrollY >= 当前top值 && scrollY < 当前top值的下一个值
					// console.log(this.scrollY,this.tops)
					// return的值是符合条件top数组的索引位置值
					return this.scrollY >= top && this.scrollY < this.tops[index+1]
				})
				return index
			}
		},
		data(){
			return {
				scrollY: 0, // 右侧滑动的 Y 轴坐标,(滑动过程实时变化)
				tops:[], // 所有右侧分类 li 的 top 组成的数组, (列表第一次显示后就不再变化)
				food:{}, // 保存当前选中的菜品
			}
		},
		created(){
			this.$store.dispatch('REQGOODS',()=>{
				setTimeout(()=>{
					this._initScrollT() // 初始化 scrollY
					this._initTops() // 初始化 tops
				},0)
			})
		},
		methods:{
			// 初始化滚动条位置 scrollY
			_initScrollT(){
				let menuWrapper = new BScroll(this.$refs.menuWrapper,{ // 初始化滚动条容器1
					probeType:2, // 设置该属性 scroll 事件才会生效 
					click:true
				})
				// 这里因为foodsWrapper要全局使用所以变成了this而不是使用let
				this.foodsWrapper = new BScroll(this.$refs.foodsWrapper,{ // 初始化滚动条容器2
					probeType:2,
					click:true
				})
				// 收集右侧的实时滚动条的值
				this.foodsWrapper.on('scroll',({x,y})=>{ // 这个on是 better-scroll 第三方的api
					this.scrollY = Math.abs(y)
				})
				// 监听惯性滑动结束事件
				this.foodsWrapper.on('scrollEnd',({x,y})=>{ // 这个on是 better-scroll 第三方的api
					this.scrollY = Math.abs(y)
				})
			},
			// 初始化tops
			_initTops(){
				let tops = [] // 定义最终结果数组
				let top = 0 // 定义 count 初始值
				tops.push(top) // 导入结果
				let lis = document.querySelectorAll('.food-list-hook')
				Array.from(lis).forEach(li=>{
					top += li.clientHeight // 累加
					tops.push(top) // 导入每一次的结果
				})
				// console.log(tops)
				this.tops = tops // 赋值
			},
			// 点击对应菜单分类跳转到对应的菜品
			menuItemEvent(index){
				// 得到目标位置的 scrollY值
				const scrollY = this.tops[index]
				// 立即更新scrollY的值,(让点击菜单分类后立即响应current类名)
				this.scrollY = scrollY
				// 平滑滑动右侧列表
				this.foodsWrapper.scrollTo(0,-scrollY,300)
			},
			// 传递选中的当前菜品
			foodDetailShow(food){
				this.food = food // 保存菜品
				this.$refs.foods.changeIsShow()	// 调用儿子的方法让大图和菜品详情显示
			}
		},
		components:{
			CartControl,
			FoodDetailImage,
			ShopCart
		}
	}
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
@import "../../../common/stylus/mixins.styl"
		.goods
				display: flex
				position: absolute
				top: 195px
				bottom: 46px
				width: 100%
				background: #fff;
				overflow: hidden
		.menu-wrapper
				flex: 0 0 80px
				width: 80px
				background: #f3f5f7
		.menu-item
				display: table
				height: 54px
				width: 56px
				padding: 0 12px
				line-height: 14px
		&.current
				position: relative
				z-index: 10
				margin-top: -1px
				background: #fff
				color: $green
				font-weight: 700
		.text
				border-none()
		.icon
				display: inline-block
				vertical-align: top
				width: 12px
				height: 12px
				margin-right: 2px
				background-size: 12px 12px
				background-repeat: no-repeat
		.text
				display: table-cell
				width: 56px
				vertical-align: middle
				bottom-border-1px(rgba(7, 17, 27, 0.1))
				font-size: 12px
		.foods-wrapper
				flex: 1
		.title
				padding-left: 14px
				height: 26px
				line-height: 26px
				border-left: 2px solid #d9dde1
				font-size: 12px
				color: rgb(147, 153, 159)
				background: #f3f5f7
		.food-item
				display: flex
				margin: 18px
				padding-bottom: 18px
				bottom-border-1px(rgba(7, 17, 27, 0.1))
		&:last-child
				border-none()
				margin-bottom: 0
		.icon
				flex: 0 0 57px
				margin-right: 10px
		.content
				flex: 1
		.name
				margin: 2px 0 8px 0
				height: 14px
				line-height: 14px
				font-size: 14px
				color: rgb(7, 17, 27)
		.desc, .extra
				line-height: 10px
				font-size: 10px
				color: rgb(147, 153, 159)
		.desc
				line-height: 12px
				margin-bottom: 8px
		.extra
		.count
				margin-right: 12px
		.price
				font-weight: 700
				line-height: 24px
		.now
				margin-right: 8px
				font-size: 14px
				color: rgb(240, 20, 20)
		.old
				text-decoration: line-through
				font-size: 10px
				color: rgb(147, 153, 159)
		.cartcontrol-wrapper
				position: absolute
				right: 0
				bottom: 12px
</style>
